<template>
  <div class="popWin" v-if="show">
    <div class="popWinBg" v-if="show"></div>
    <div class="popWinMain" ref="popWinMain" :style="{ height: popHeight }" v-if="show">
      <div class="popWinMainInner">
        <bg></bg>
        <div class="titleBody" ref="titleBody">
          <span v-if="showInner">{{ title }}</span>
          <div class="popClose" ref="popClose" v-if="showInner" @click="getHide"></div>
        </div>
        <div class="slot" v-if="showInner">
          <slot v-if="showInner"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import gsap from 'gsap'
import bg from './bg.vue'
export default {
  data() {
    return {
      show: false,
      showInner: false
    }
  },
  components: {bg},
  computed: {},
  mounted() {
  },
  props: {
    title: {
      type: String,
      default() {
        return '绘制告警区域';
      }
    },
    popWidth: {
      type: String,
      default() {
        return '1200px';
      }
    },
    popHeight: {
      type: String,
      default: '700px'
    }
  },
  methods: {
    animateElement(element, properties, onComplete) {
      gsap.to(element, {
        duration: 1,
        ...properties,
        onComplete
      });
    },

    getShow() {
      this.show = true;
      this.$nextTick(() => {
        this.animateElement(this.$refs.popWinMain, { width: this.popWidth }, () => {
          this.showInner = true;
        });
      });
    },

    getHide() {
      this.showInner = false;
      this.animateElement(this.$refs.titleBody, { opacity: 0 }, () => {
        this.showInner = false;
      });
      this.$nextTick(() => {
        this.animateElement(this.$refs.popWinMain, { width: '0%' }, () => {
          this.show = false;
        });
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.popWinBg {
  position: fixed;
  z-index: 8;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: initial;
}

.titleBody {
  width: calc(100% - 40px);
  margin: auto;
  margin-top: 15px;
  height: 38px;
  position: relative;
  background: url("./assets/line.png") bottom center no-repeat;
  background-size: 100% 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  opacity: 1;
  z-index: 0;

  span {
    font-size: 18px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
  }
}

.popWin {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: fixed;
  z-index: 10;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;

}

.popWinMainInner {
  pointer-events: initial;
  position: relative;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
}

.popWinMain {
  pointer-events: initial;
  position: relative;
  overflow: hidden;
  width: 0;
  max-width: 1642px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  z-index: 100;

  .slot {
    position: absolute;
    top: 80px;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 100px);
    //background: red;
  }
}

.popClose {
  background: url("./assets/icon_close.png") no-repeat;
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 1;
}
</style>
